<template>
	<view class="page">
			<view class="curved_box">
				<view class="text_cover">
					<image class="titleImg" src="../../static/rj.png"></image>
					<image class="textImg" src="../../static/timecall.png"></image>
					<image v-if="show_love" class="loveImg" src="../../static/love_b.png" @click="showLove"></image>
					<view v-else class="loveImg" @click="showLove">
						<view class="loveText">
							{{ name }},我们在一起了
							<view class="text-2">
								{{ year }}年{{ month }}个月{{ day }}天
								<view class="text-2">
									{{ hour }}小时{{ min }}分钟{{ sec }}秒
									<view class="text-2">
										永远爱你。
										<view class="text-2">——{{ object_name }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="footerBtn">
						<image class="footerWriteImg" src="../../static/wiht.png" @click="wrihtnote"></image>
						<image class="footerReadImg" src="../../static/read.png" @click="readtnote"></image>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
import time_util from '../util/timeutil.js';
export default {
	data() {
		return {
			show_love: true,
			name: ' ',
			object_name: ' ',
			year: ' ',
			month: ' ',
			day: ' ',
			hour: ' ',
			min: ' ',
			sec: ' ',
			user_info: ''
		};
	},
	onLoad() {
		this.user_info = uni.getStorageSync('user_info');
		console.log(this.user_info);
		if (this.user_info) {
			this.name=this.user_info.name;
			this.object_name=this.user_info.object_name;
			console.log(this.user_info);
			let timeStr = this.user_info.love_time;
			console.log(timeStr);
			let times = new Date(Date.parse(timeStr.replace(/-/g, '/'))).getTime(); //将恋爱时间转换为毫秒
			console.log(times);

			let that = this;
			setInterval(function() {
				let timestamp = new Date().getTime(); //获取当前时间毫秒
				let time_out = timestamp - times; //获取差值
				that.timeout(time_out);
			}, 1000);
			// console.log(time_out);
			//格式化时间
			// let get_time = new Date(time_out);
		}
	},
	methods: {
		wrihtnote() {
			uni.navigateTo({
				url: '../write/write'
			});
		},
		readtnote() {
			uni.navigateTo({
				url: '../catalogue/catalogue'
			});
		},
		timeout(time_out) {
			// console.log(time_out);
			this.year = parseInt(time_out / (365.25 * 24 * 3600 * 1000)); //计算整数年数
			let monthms = time_out - this.year * 365.25 * 24 * 3600 * 1000;
			this.month = parseInt(monthms / (30.5 * 24 * 3600 * 1000)); //计算整数月数
			let dayms = monthms - this.month * 30.5 * 24 * 3600 * 1000;
			this.day = parseInt(dayms / (24 * 3600 * 1000)); //计算整数天数
			let hourms = dayms - this.day * 24 * 3600 * 1000;
			this.hour = parseInt(hourms / (3600 * 1000)); //计算整数小时数
			let minms = hourms - this.hour * 3600 * 1000;
			this.min = parseInt(minms / (60 * 1000)); //计算整数分钟数
			let secms = minms - this.min * 60 * 1000;
			this.sec = parseInt(secms / 1000);
		},

		showLove() {
			this.show_love = !this.show_love;
		}
	}
};
</script>

<style lang="less" scoped>
page {
	// background-color: #ffeefe; /* 页面背景色 */
}
.page {
	display: flex;
	flex-direction: column;
	box-sizing: bo rder-box;
	min-height: 100%;
	height: auto;
	// background-color: #ffeefe; /* 页面背景色 */
}

.curved_box {
	display: inline-block;
	display: inline;
	width: 540rpx;
	margin: 100rpx;
	height: auto;
	background-color: #fdf5e5;
	border: 1px solid #eee;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	position: relative;
	zoom: 1;
}

.curved_box:before {
	-webkit-transform: skew(-15deg) rotate(-6deg);
	-moz-transform: skew(-15deg) rotate(-6deg);
	transform: skew(-15deg) rotate(-6deg);
	left: 15px;
}
.curved_box:after {
	-webkit-transform: skew(15deg) rotate(6deg);
	-moz-transform: skew(15deg) rotate(6deg);
	transform: skew(15deg) rotate(6deg);
	right: 15px;
}

.curved_box:before,
.curved_box:after {
	width: 70%;
	height: 55%;
	content: ' ';

	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

	position: absolute;
	bottom: 10px;
	z-index: -1;
}
.img {
	width: 260rpx;
	height: 260rpx;
	border-radius: 90rpx;
	margin-top: 10rpx;
}
.text_cover {
	.text-center {
		text-align: center;
	}
	.titleImg {
		height: 160rpx;
		width: 426rpx;
		margin-top: 60rpx;
		margin-left: 50rpx;
	}
	.textImg {
		height: 160rpx;
		width: 380rpx;
		margin-left: 80rpx;
	}
	.loveImg {
		height: 450rpx;
		width: 450rpx;
		margin-left: 40rpx;
	}
	.footerBtn {
		.footerWriteImg {
			height: 60rpx;
			width: 200rpx;
			margin-left: 40rpx;
		}
		.footerReadImg {
			height: 60rpx;
			width: 200rpx;
			margin-left: 40rpx;
		}
	}
	.loveText {
		font-size: 36rpx;
		font-family: '楷体';
		margin-top: 10rpx;
		.text-2 {
			margin-left: 70rpx;
		}
	}
	.form {
		padding: 60rpx;
		display: block;
		.formItem {
			box-sizing: border-box;
			width: 100%;
			height: 112rpx;
			background-image: url(../../static/text.png);
			font-size: 36rpx;
			padding: 32rpx;
			margin: 20rpx 0;
			border-radius: 56rpx;
			&.submit {
				background-image: url(../../static/logintext.png);
				// color: #ffffff;
				text-align: center;
				font-size: 40rpx;
				line-height: 40rpx;
			}
		}
	}
}
</style>
